<template>
	<div class="flex-center">
		<div class="status-circle-icon" :style="{ background: setStatusStyle(status).color }"></div>
		<span>{{ setStatusStyle(status).name }}</span>
	</div>
</template>
<script>
    export default {
        props: {
            status: {
                type: [String, Number, Boolean],
                default: ''
            }
        },
        data() {
            return {};
        },
        methods: {
            setStatusStyle(state) {
                if (!state) {
                    return {
                        color: '#808695',
                        name: '离职'
                    };
                } else {
                    return {
                        color: '#2b85e4',
                        name: '在职'
                    };
                }
            }
        }
    };
</script>
<style scoped lang="scss">
.status-circle-icon {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>
